<template>
  <div class="ie-stats">
    <img
      v-if="props.imgSrc"
      :src="props.imgSrc"
      :width="props.imgWidth"
      :height="props.imgHeight"
    />
    <a-statistic
      v-for="(item, $index) in props.statsData"
      :key="$index"
      :title="item.label"
      :value-from="0"
      :value="item.value"
      :show-group-separator="props.showGroupSeparator"
      animation
    >
      <template #suffix>
        {{ props.statsUnit }}
        <span
          v-if="suffix && $index === 0"
          :class="[
            'suffix',
            suffix.class
          ]"
        >({{ suffix.percent }})</span>
      </template>
    </a-statistic>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import NP from 'number-precision'

NP.enableBoundaryChecking(false)

const props = defineProps({
  imgSrc: {
    type: String
  },
  imgWidth: {
    type: Number,
    default: 48
  },
  imgHeight: {
    type: Number,
    default: 48
  },
  statsData: {
    type: Array,
    default: () => [] // ({ label, value })
  },
  statsUnit: {
    type: String,
    default: ''
  },
  showGroupSeparator: {
    type: Boolean,
    default: true
  },
  showSuffix: {
    type: Boolean,
    default: false
  }
})

const suffix = computed(() => {
  const [to, from] = props.statsData

  if (!props.showSuffix) return
  if (
    from === undefined ||
    (from?.value <= 0)
  ) return

  const suffixProps = {
    percent: (((to?.value - from.value) * 100) / from.value).toFixed(0) + '%'
  }

  if (to.value > from.value) {
    suffixProps.class = 'up'
  } else if (to.value < from.value) {
    suffixProps.class = 'down'
  }

  return suffixProps
})
</script>

<style lang="less">
.ie-stats {
  background-color: #FFF;
  border-radius: 4px;
  margin-bottom: 24px;
  padding: 28px;
  display: flex;
  align-items: center;

  img {
    margin-right: 28px;
  }

  .arco-statistic {
    flex: 1;

    & + .arco-statistic {
      opacity: .7;
    }
  }

  .suffix {
    font-size: 12px;

    &.up {
      color: #66CB9F;
    }

    &.down {
      color: #F16063;
    }
  }

  .arco-statistic-title {
    margin-top: -5px;
  }

  .arco-statistic-content .arco-statistic-value {
    line-height: 20px;
  }

  .arco-statistic-suffix {
    font-size: 20px;
    margin-left: 4px;
    vertical-align: middle;
  }
}
</style>